<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-gl.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.resize.js"></script>
    <script src="js/yk.js"></script>

    <style type="text/css">
        input {
            width: 60px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div>

    <div id="plist" style="float: right; background-color: cornsilk; width: 400px;z-index: 100;">
        <div>
            <div>

                <button><input type="file" id="files" style="display:none" onchange="import();"/>导入</button>
            </div>
            <button data-yk-type="openFile">打开</button>
            <button>保存</button>
        </div>
        <label>测量点列表</label>：<a href="#" id="AddMoreInputEntry"></a>
        <br/>
        <label style="width: 100px;padding-left: 30px;">X</label>
        <label style="width: 100px;padding-left: 60px;">Y</label>
        <label style="width: 100px;padding-left: 45px;">温度</label><br/>
        <div class="xyt" id="p0">
            <label for="x0"></label><input type="number" class="x" id="x0" placeholder="x0" step="0.01">
            <label for="y0"></label><input type="number" class="y" id="y0" placeholder="y0" step="0.01">
            <label for="t0"></label><input type="number" class="t" id="t0" placeholder="t0" step="0.01">
        </div>
    </div>
    <div id="echarts1" style="border: 2px solid black; padding: 10px 40px;
        width: 800px; height: 800px; resize: both; overflow: auto;
        position: static; left: 20px; top: 20px; z-index: 10;">
    </div>
</div>
<script type="text/javascript">
    myChart = echarts.init(document.getElementById('echarts1'), 'light');
    myChart.setOption({
        grid3D: {},
        // 默认情况下，x,y,z分别是从0到1的数值轴
        xAxis3D: {
            data: []
        },
        yAxis3D: {
            data: []
        },
        zAxis3D: {},

        visualMap: [
            {
                type: 'continuous',
                dimension: 2,
                min: 25,
                max: 35,
                // text: ['', '低'],
                calculable: true,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            }
        ],

        series: [{
            type: 'surface',
            data: [],
            wireframe: true,
        }]
    })

    $('#echarts1').resize(
        function () {
            myChart.resize();
        }
    );

</script>
<script>
    testPoints = []  // 全局参数，储存所有的点坐标
    let plist_ele = $("#plist");
    url = "http://127.0.0.1:5000/"
    plist_ele.on('keyup', '.x', function (e) {  // 这里不能使用$(".x").onkeyup()方法，否则动态添加的元素没有x类的事件
        if (e.keyCode === 13) {  // 按Enter时，将光标移动到y列输入框，按tab键是默认的
            let num = $(e.target).attr('id').substr(1);
            let to_id = "y" + num;
            let to_ele = $("#" + to_id);
            let now_value = to_ele.val();
            to_ele.val('').focus().val(now_value);
            let x_ele = $("#x" + num);
            if (x_ele.val().trim() === "") {
                x_ele.css({border: "2px solid red", placeholder: "必填项"})
            } else {
                x_ele.css({border: "1px solid black"})
            }
        }
    });


    plist_ele.on('keyup', '.y', function (e) {
        if (e.keyCode === 13) {
            let num = $(e.target).attr('id').substr(1);
            let to_id = "t" + num;
            let to_ele = $("#" + to_id);
            let now_value = to_ele.val();
            to_ele.val('').focus().val(now_value);
            let y_ele = $("#y" + num);
            if (y_ele.val().trim() === "") {
                y_ele.css({border: "2px solid red", placeholder: "必填项"})
            } else {
                y_ele.css({border: "1px solid black"})
            }
        }
    });

    plist_ele.on('keyup', '.t', function (e) {
        if (e.keyCode === 13) {
            let this_point_idx = $(e.target).attr('id').substr(1);
            let next_point_idx = Number(this_point_idx) + 1;
            let next_text_field = "x" + next_point_idx;
            let to_ele = $("#" + next_text_field);

            // ===============================验证当前point数据是否完整=====================================
            let x_ele = $("#x" + this_point_idx);
            let y_ele = $("#y" + this_point_idx);
            let t_ele = $("#t" + this_point_idx);
            t_ele.blur();
            // x_ele.text()
            let valid = true;
            if (x_ele.val().trim() === "") {
                x_ele.css({border: "2px solid red", placeholder: "必填项"});
                valid = false;
            }
            if (y_ele.val().trim() === "") {
                y_ele.css({border: "2px solid red", placeholder: "必填项"});
                valid = false;
            }
            if (t_ele.val().trim() === "") {
                t_ele.css({border: "2px solid red", placeholder: "必填项"});
                valid = false;
            } else {
                t_ele.css({border: "1px solid black"})
            }
            if (!valid) {
                return;
            }
            // ===============================验证当前point数据是否完整=====================================
            // ===============================收集points数据列表=====================================
            testPoints.length = 0; // 清空数组
            $(".xyt").each(function (i, ele) {
                let idx1 = $(ele).attr('id').substr(1);
                let x_ele = $("#x" + idx1);
                let y_ele = $("#y" + idx1);
                let t_ele = $("#t" + idx1);
                let valid = true;
                if (x_ele.val().trim() === "") {
                    x_ele.css({border: "2px solid red", placeholder: "必填项"});
                    valid = false;
                }
                if (y_ele.val().trim() === "") {
                    y_ele.css({border: "2px solid red", placeholder: "必填项"});
                    valid = false;
                }
                if (t_ele.val().trim() === "") {
                    t_ele.css({border: "2px solid red", placeholder: "必填项"});
                    valid = false;
                }
                if (valid) {
                    testPoints.push([x_ele.val(), y_ele.val(), t_ele.val()]); // 当界面中点重复时，传递给后台的点也会重复
                }

            })

            // ===============================收集points数据列表=====================================

            // 发送绘图插值请求
            let send_data = {};
            send_data.points = testPoints;
            send_data.testAction = 'Interpolate2D';
            send_data.xRange = [0, 21, 1];
            send_data.yRange = [0, 21, 1];
            let send_str = JSON.stringify(send_data);  // JSON.parse();互转
            $.ajax({
                url: url + "?Action=Interpolate2D",
                type: "POST",
                dataType: 'json',
                data: send_str,
                contentType: 'application/json;charset=utf-8',
                async: false,
                success: function (data) {
                    if (data !== "") {
                        // result.html(JSON.stringify(data, null, 4)); // 将data对象转换为字符串
                        let points_list = data.points
                        for (let point in points_list) {

                        }
                        myChart.setOption({
                            xAxis3D: {
                                data: []
                            },
                            yAxis3D: {
                                data: []
                            },
                            series: [{
                                data: points_list,
                            }]
                        })
                    }
                },
                error: function (arg1) {
                    console.log(arg1)
                }
            });


            // 添加新的点输入框

            if (to_ele.length <= 0) {  // 元素不存在则创建
                $("#p" + this_point_idx).after("<div class=\"xyt\" id=\"p" + next_point_idx + "\">\n" +
                    "        <input type=\"number\" class=\"x\" id=\"x" + next_point_idx + "\" placeholder=\"x" + next_point_idx + "\" step=\"0.01\">\n" +
                    "        <input type=\"number\" class=\"y\" id=\"y" + next_point_idx + "\" placeholder=\"y" + next_point_idx + "\" step=\"0.01\">\n" +
                    "        <input type=\"number\" class=\"t\" id=\"t" + next_point_idx + "\" placeholder=\"t" + next_point_idx + "\" step=\"0.01\">\n" +
                    "    </div>")
            }

            // 移动光标到下一个点
            let now_value = to_ele.val();
            to_ele.val('').focus().val(now_value);
        }
    });

</script>
<script type="text/javascript">
    $(document).ready(function () {
        includeOnce('js/echarts.js'); // 引入顺序不影响结果，但最好位于执行代码之前
        includeOnce('js/echarts-gl.min.js')
        // ykInit();
    });
</script>
</body>
</html>